---
import PocketBase from 'pocketbase';

const url = 'https://autoreport.site:8888/api/files/fo2a6gvtrc49kfq'
const pb = new PocketBase('https://autoreport.site:8888');
const records = await pb.collection('solution_jp').getFullList({
    sort: 'created',
  });
const list = records.map((item: any) => {
  return {
    icon: `${url}/${item.id}/${item.icon}`,
    title: item.title,
    line: item.line,
    content: item.content,
  }
})
const SolutionList = list
---

<div class="bg-[#F0F2F5] w-full py-[60px]">
  <div class="text-[40px] text-[#333] font-[700] mx-[10%]">コア技術</div>
  <div class="mt-[30px]">
    <div class="mx-[10%] text-[20px] font-[300] mb-14">
      マルチソース情報知覚とインテリジェントな意思決定:さまざまなソースからデータを収集し、詳細な分析を行い、インテリジェントな判断を行い、さまざまな対応計画を正確に提案します。
    </div>
    <div class="flex space-x-4 mx-[10%]">
      {
        SolutionList.map((item: any) => (
          <div class="bg-white h-[460px] flex-1 relative mb-[40px] py-8 px-6">
            <img
              src={item.icon}
              class="absolute bottom-0 left-0 right-0 h-[237px] w-full background-size-cover background-repeat"
            />
            <div class=" text-[20px] text-[#000] leading-7 mb-4 relative">
              {item.title}
            </div>
            <div class="text-[13px] text-[#000] leading-6 relative h-[96px] font-[400]">
              <div class="textbox mb-2">{item.line}</div>
              <div class="textbox">Target: {item.content}</div>
            </div>
          </div>
        ))
      }
    </div>
  </div>
</div>

<style>
  .textbox {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
